<template>
	<eui-page-frame :topHeight="464">
		<template #top>
			<view class="content-img" :style="[bgimage]">
				<eui-nav-bar rightIcon="" rightComponent="" color="black" style="margin-left:30rpx">
					<template #titleExpand>
						<eui-search-bar placeholder="搜索铺位" radius="100" style="width:634rpx" @confirm="search"
							bgColor="#FFFFFF" :borderColor="searchBorderColor" filterButton leftIcon="false" />
					</template>
					>
				</eui-nav-bar>
			</view>
			<view class="dropdownsearch_header">
				<eui-dropdownsearch v-model:menuList="menuList" @update:menuList="whereList" :themeColor="themeColor"
					:duration="300" :isCeiling="true"></eui-dropdownsearch>
			</view>
		</template>
		<eui-page-content>
			<scroll-view class="scroll-box" scroll-y :refresher-enabled="true" refresher-threshold="45"
				:refresher-triggered="triggered" refresher-background="none" @scrolltolower="lower"
				@refresherrefresh="onRefresh">
				<eui-base-card v-for="(item, index) in counterList" v-model="counterList" :key="index"
					@click="openDetail(item)" style="width:auto;">
					<template #left>
						<image class="e-image" :src="item.c_cover" mode="aspectFill" />
					</template>
					<view class="e-iconstext">
						<view class="e-titleName">{{ item.c_name }}</view>
						<view style='height:37rpx;margin-top:16rpx;font-size: 26rpx;' class='showtext'>
							<eui-uicons v-if="!!item.c_building_name || !!item.c_use_area" size="24rpx"
								style='margin-right:8rpx; color:#888888 ' fontFamily="enjoyIcon5"
								customPrefix="icon-dingwei1" />
							<span v-if="!!item.c_building_name || !!item.c_use_area" style=" color: #888888">
								{{ item.c_building_name }}-{{ item.c_floor_name }}-{{ item.c_no }}
								<span v-if="!!item.c_use_area">| {{ item.c_use_area }}㎡</span>
							</span>
						</view>
						<eui-tag v-if="item.c_counter_planformname"
							style="position: absolute; right: 18rpx;margin-top:8rpx" :type="tagType" size="mini"
							:text="item.c_counter_planformname" plainFill></eui-tag>
					</view>
					<view style="margin-top: 8rpx; font-size: 18rpx; color: #888888;height:37rpx">
						{{ item.c_sign_bcname }}
					</view>
					<eui-detail-show :items="counterItem" v-model="counterList[index]" style='margin-top:35rpx'
						flex-grow labelWidth="0px" size="small"></eui-detail-show>
				</eui-base-card>
			</scroll-view>
		</eui-page-content>
	</eui-page-frame>
</template>

<script setup type="ts">

	import { ref } from 'vue';
import { onShow, onLoad } from "@dcloudio/uni-app";
import useService from '@/hooks/useService';
import apps from '@/pages/MainViews/app'; 
import { getRelatedName, getDictName, getDictList } from '../components/RelatedName.js';
import { init } from '@/hooks/init';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/themeStore';
import {useMainStore} from "@/store/modules/store";
const themeStore = useThemeStore(); // 主题
const { theme } = storeToRefs(themeStore);
const bgimage =theme._object.theme=='theme-blue'?"background-image: url(../../../static/img/rdsImgs/top_cpw_blue.jpg);":'background-image: url(../../../static/img/rdsImgs/top_cpw_orange.jpg);'
const themeColor = ref(theme._object.theme=='theme-blue'?'#02B7E6':'#FF6430')
const tagType = ref(theme._object.theme=='theme-blue'?'warning':'success')
const searchBorderColor = ref('1px solid '+themeColor.value)
const service = useService({ prefix: "apiApi" });
const mainStore = useMainStore();
const { loginInfo } = mainStore;



//铺位信息
const counterList = ref([{
	c_no:'',
	c_name:'',
	c_store_id:'',
	c_building_no:'',
	c_building_name:'',
	c_floor_no:'',
	c_floor_name:'',
	c_use_area:'',
	c_sign_bcode:'',
	c_sign_bcname:'',
	c_counter_form:'',
	c_counter_formname:'',
	c_counter_planform:'',
	c_counter_planformname:'',
	c_ccode:'',
	c_ccode_name:'',
	c_merchant:'',
	c_merchant_name:'',
	c_operation:'',
	c_operation_name:'',
	c_merchant_operation_name:'',
	c_cover:'../../../static/img/no_image.png'
}]);


onLoad(async() => {
await init();
await GetSearchData();
	counterList.value = [];
	getCounterList(false);
})
// onShow(() => {
// 	counterList.value = [];
// 	getCounterList(false);
// })

const search = (value)=>{
	conditions.value.c_counter_name = value.value;
	getCounterList()
}


const counterItem = [
	{
		label: "",
		prop: "",
		type: "text",
		colSpan: 24
	},
	{
		label: "",
		prop: "c_merchant_operation_name",
		type: "tag",
		colSpan: 24,
		element: {
			size: "mini",
			shape: "square",
			plain: true,
			plainFill:true,
			color:themeColor.value,
			borderColor:themeColor.value,
			bgColor:themeColor.value
		},
	}
]


//分页处理
const CurrentPage = ref(1);  //第几页
const PageSize = ref(10);  //每页10条
const RowsCount = ref(0);  //总条数
const PageCount = ref(1);  //总页数
const triggered = ref(false);
const freshing = ref(false);
const lower = async () => {
	if (CurrentPage.value < PageCount.value) {
		CurrentPage.value = CurrentPage.value + 1;
		 await getCounterList(true);
	}
}
	const onRefresh = async(e)=> {
		if (freshing.value) return;
		freshing.value = true;
		if (!triggered.value) {//界面下拉触发，triggered可能不是true，要设为true
			triggered.value = true;
			await getCounterList();
		}
		
		setTimeout(() => {
		triggered.value = false;//触发onRestore，并关闭刷新图标
		freshing.value = false;
		}, 1000)
	}
const getCounterList = async (curPage) => {
	if (!curPage) {
		CurrentPage.value = 1;
	}
	const req = {
		IsNotPage: false,
		CurrentPage: CurrentPage.value,
		PageSize: PageSize.value,
		WhereList: [
			{
				c_col: "c_store_id",
				c_oper: "等于",
				c_value: loginInfo?.sUserStore,
				c_logic: "而且"
			},
			{
				c_col: "c_floor",
				c_oper: "等于",
				c_value: conditions.value?.c_floor,
				c_logic: "而且"
			},
			{
				c_col: "c_ccode",
				c_oper: "等于",
				c_value: conditions?.value?.c_ccode,
				c_logic: "而且"
			},
			{
				c_col: "c_merchant",
				c_oper: "等于",
				c_value: conditions?.value?.c_merchant,
				c_logic: "而且"
			},
			{
				c_col: "c_operation",
				c_oper: "等于",
				c_value: conditions?.value?.c_operation,
				c_logic: "而且"
			},
			{
				c_col: "c_counter_name",
				c_oper: "等于",
				c_value: conditions?.value?.c_counter_name,
				c_logic: "而且"
			},
		]
	}
	
	uni.showLoading({ title: "查询中...", mask: true });
	const data = await service.request('管易通铺位查询', 'GetCounterList', req);
	uni.hideLoading();
	if (data && data.ReturnObject) {
			CurrentPage.value = data.CurrentPage; //第几页
			PageSize.value = data.PageSize; //每页10条
			RowsCount.value = data.RowsCount; //总条数
			PageCount.value = data.PageCount; //总页数
			console.log('1.CurrentPage.value= '+CurrentPage.value + '  2.PageSize.value= '+PageSize.value+' 3.RowsCount.value='+RowsCount.value+' 4.PageCount.value ='+PageCount.value )
			const objectdata= (data.ReturnObject??[])?.map(x => {
				return {
					c_no: x.c_no,
					c_name: x.c_name,
					c_store_id: x.c_store_id,
					c_building_no: x.c_building_no,
					c_building_name: x.c_building_name,
					c_floor_no: x.c_floor_no,
					c_floor_name: x.c_floor_name,
					c_use_area: x.c_use_area,
					c_sign_bcode: x.c_sign_bcode,
					c_sign_bcname: x.c_sign_bcname,
					c_counter_form: x.c_counter_form,
					c_counter_formname: x.c_counter_formname,
					c_counter_planform: x.c_counter_planform,
					c_counter_planformname: x.c_counter_planformname,
					c_ccode: x.c_ccode,
					c_ccode_name: x.c_ccode_name,
					c_merchant: x.c_merchant,
					c_merchant_name: x.c_merchant_name,
					c_operation: x.c_operation,
					c_operation_name:x.c_operation_name ,
					c_merchant_operation_name:`${x.c_merchant_name},${x.c_operation_name}`,
					c_cover: x.c_pic_guid ? (service.getBaseUrl() + '/File/DownLoadFile/' + x.c_pic_guid) : ('../../../static/img/no_image.png')
				}
			});
		  if (data.CurrentPage == 1) {
				counterList.value = objectdata;
			} else {
				counterList.value = counterList.value.concat(objectdata);
			}
	}
}

//预警日期
const conditions =ref({
	c_floor:'',
	c_ccode:'',
	c_merchant:'',
	c_operation:'',
	c_counter_name:''
})
const whereList = (newWhereList)=>{
	 conditions.value.c_floor = newWhereList[0]?.value;
	 conditions.value.c_ccode = newWhereList[1]?.value;
	 conditions.value.c_merchant = newWhereList[2]?.value;
	 conditions.value.c_operation = newWhereList[3]?.value;
	  getCounterList();
}

//打开明细页
const openDetail = (item) => {
	console.log('==================' + JSON.stringify(item))
	uni.navigateTo({ url: `./detail?c_store_id=${item.c_store_id}&c_counter_no=${item.c_no}&c_counter_name=${item.c_name}` });
}

//条件数据
const searchData = ref([{
	label:'',
	value:''
}]);
const menuList = ref(searchData);
const GetSearchData = async () => {
	uni.showLoading("查询中...");
	searchData.value = [
		{
			title: '楼栋/楼层',
			type: 'cell',
			value: '',
			options: [
				{
					label: "全部",
					value: ''
				}
			]
		},
		{
			title: '业态',
			type: 'cell',
			value: '',
			options: [
				{
					label: "全部",
					value: ''
				},
			],
		},
		{
			title: '招商状态',
			type: 'cell',
			value: '',
			options: [
				{
					label: "全部",
					value: ''
				},
			],
		},
		{
			title: '营运状态',
			type: 'cell',
			value: '',
			options: [
				{
					label: "全部",
					value: ''
				},
			],
		}
	];

	const req = {
		WhereList: [{
			c_col: "c_store_id",
			c_oper: "等于",
			c_value: loginInfo?.sUserStore,//取当前登录机构
			c_logic: "而且"
		}]
	};
	const resq = await service.request('管易通铺位查询', 'GetCounterSearchItem', req);
	if (resq) {
		if (resq?.ds.length > 0) {
			const data = resq.ds.map(x => {
				return {
					label: x.c_name,
					value: x.c_no
				}
			});
			searchData.value[0].options.push(...data);
		}
		if (resq?.ds1.length > 0) {
			const dataZS = resq.ds1.map(x => {
				return {
					label: x.c_name,
					value: x.c_id
				}
			});
			searchData.value[2].options.push(...dataZS);
		}
		if (resq?.ds2.length > 0) {
			const dataYY = resq.ds2.map(x => {
				return {
					label: x.c_name,
					value: x.c_id
				}
			});
			searchData.value[3].options.push(...dataYY);
		}
	}

	const reqw = { WhereList: [] }
	const resw = await service.request('管易通铺位预警', 'QueryBussinessTypeList', reqw);
	uni.hideLoading();
	if (resw && resw.ReturnObject) {
		const dataw = resw.ReturnObject;
		if (dataw.length > 0) {
			const data = dataw.map(x => {
				return {
					label: x.c_name,
					value: x.c_ccode
				}
			});
			searchData.value[1].options.push(...data);
		}
	}
};
</script>

<style lang="scss">
	@import '../../../static/font/enjoyicon5.0/iconfont.css';
	@import '../../../uni.scss';

	.scroll-box {
		height: 100%;
	}

	.e-titleName {
		margin-top: 36rpx;
		height: 48rpx;
		font-size: 34rpx;
		font-family: 'PingFang SC', sans-serif;
		font-weight: 600;
		/* 中粗体 */
		width: 100%;
		overflow: hidden;
	}

	.showtext {
		font-family: 'PingFang SC', sans-serif;
		font-weight: normal;
		text-align: left;
	}

	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #f2f2f2;
		padding: 0rpx !important;
	}

	.content-img {

		background-image: url(../../../static/img/rdsImgs/top_cpw_blue.jpg);
		background-size: 100% 460rpx;
		background-repeat: no-repeat;
		width: 100%;
		height: 460rpx;
	}

	.dropdownsearch_header {
		margin-top: -88rpx;
		width: auto;
		height: 88rpx;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 30rpx 30rpx 0rpx 0rpx;
	}

	.e-content {
		margin-top: 32rpx;
		margin-bottom: 32rpx;
	}

	.e-iconstext {
		margin-top: 10rpx;
	}

	.e-tagName {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.e-tag_abc_state {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
		flex-wrap: wrap;
	}

	.e-image {
		border-radius: 10rpx;
		width: 240rpx;
		height: 240rpx;
		margin: 32rpx 8rpx 28rpx 28rpx;
	}
</style>